import React, { Component } from 'react';

import pic from '../assets/01-首页-快捷入口_01.png'

import "../styles/MyEntry.scss"

class MyEntry extends Component {
    // 定义组件状态写法一:
    // state 会保存在当前组件实例(this)身上
    // state = {
    //     list:[]
    // }

    // 定义组件状态写法二:
    constructor(props){
        super(props);
        this.state = { //state中保存的值就是组件的状态
            list:[
                { pic,text:'护肤' },{ pic,text:'彩妆' },{ pic,text:'香氛' },
                { pic,text:'进口酒' },{ pic,text:'国产酒' },{ pic,text:'精品奢货' },
                { pic,text:'食品百货' },{ pic,text:'母婴专区' },{ pic,text:'直播专区' },
                { pic,text:'特卖专场' },
            ]
        }
    }

    render() {
        return (
            <div className='list'>
                <div className="notice">
                    <span>1分抵1元。请您点击此处查看《购物须知》。</span>
                </div>
                {/* 列表渲染, this.state.list.map 是js语法必须包裹在{}中  */}
                <div className="entry">
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <div className="item" key={index}>
                                <img src={item.pic} alt="" />
                                <div className="text">{item.text}</div>
                            </div>
                        )
                    })
                }
                </div>
            </div>
        );
    }
}

export default MyEntry;